<template>
  <div>
        <ul>
            <li v-for="item in list" :key="item.time">
                id: {{ item.id }} ---书名: {{ item.name }} --- 时间: {{ item.time }} ---
                <button @click="del(item.id)">删除</button> --- 
                <button @click="edit(item.id)">编辑</button>
            </li>
        </ul>
        <Dialog
            :info="info"
            @sendFalse="sendFalse"
            @sendEditInfo="sendEditInfo"
            v-show="isShowEdit"/>
  </div>
</template>

<script>
import Dialog from './Dialog.vue'
export default {
    data() {
        return {
            list: [],
            isShowEdit: false,
            info: {}
        }
    },
    components: {
        Dialog
    },
    mounted() {
        this.$bus.$on("sendObj", (obj) => {
            this.list.push(obj)
        })
    },
    methods: {
        del(id) {
            this.list = this.list.filter(item => item.id !== id)
        },
        // 编辑
        edit(id) {
            // 过滤出要传递的数据
            this.info = this.list.filter(item => item.id === id)[0]
            this.isShowEdit = true
        },
        // Dialog修改isShowEdit
        sendFalse(flag) {
            this.isShowEdit = flag
        },
        // 修改列表
        sendEditInfo(editInfo) {
            // 通过map来进行替换
            this.list = this.list.map(item => {
                // 要编辑的内容
                if (item.id === editInfo.id) {
                    return editInfo
                } else {
                    // 不需要编辑的内容
                    return item
                }
            })

            // this.list = this.list.map(item => item.id === editInfo.id? editInfo: item)
        }
    }
}
</script>

<style>

</style>